// 统一的注册所有的全局组件
// import XtxSkeleton from '@/components/skeleton/index.vue'
// import { App } from 'vue'
// export default {
//   install(app: App) {
//     app.component('XtxSkeleton', XtxSkeleton)
//   },
// }
// 图片懒加载自定义指令
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
// 批量注册
import { App } from 'vue'
export default {
  install(app: App) {
    const components = import.meta.globEager('./*/*.vue')
    Object.keys(components).forEach((key: any) => {
      const com: any = components[key] // 组件模块
      let component = com.default  //组件对象
      app.component(component.name, component)
    })

    // 自定义指令
    // <img :src="item.src" alt="" />
    // <img v-lazy="item.src" alt="" />
    app.directive('lazy', {
      mounted(el: HTMLImageElement, { value }) {
        // 图片的懒加载逻辑
        // 参数1：回调函数
        // 参数2：可选的配置
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 停止监听
            stop()
            // 给el元素设置src属性
            // value = '123.jpg'
            el.src = value
            // 如果图片加载失败，显示默认的图片
            el.onerror = function () {
              el.src = defaultImg
            }
          }
        })
      }
    })
  },
}
